HTML-Exemplos de Menus1-Vertical

Hoje em dia com as ferramentas que nos auxiliam ficou fácil e prático fazer um menu utilizando seus recursos.

Para construção de menus um dos melhores recursos é o BootStrap e como ele é um padrão, responsivo e só tem vantagens a gente costuma muito usar ele para fazer esses menus mas sempre é bom saber o que dá pra fazer com a ferramenta pura.

Como recursos básicos de um Menu simples diria que são :
1-Indicação de que página nos encontramos do menu.
2-No mouse over mudar a cor de fundo.
3-O estilo dos itens devem ser completamente customizáveis para o que desejamos fazer.

Muitas vezes queremos colocar o menu numa lateral da página e se ele ocupar pouco espaço melhor. Esta é a aplicação ideal do menu vertical.


Este menu é feito com puro html e CSS. Nada de JavaScript. Todos os itens são personalizaveis e este é o grande motivo de usar esses menus, muito simples de utilizar, personalizar, etc.

Neste menu temos uma imagem de fundo comum para cada item da lista (menu.png).
Ela tem 400 px de comprimento porque possui uma cor mais clara de fundo quando é carregada e é trocada por uma cor de fundo mais escura no mouse over.
Como o item do menu tem 200px a imagem de fundo deve ter 400px.
No deslocamento movemos a imagem de maneira a mostrar o fundo mais escuro.